<template>
	<view class="entryInfo">
		<!-- 材料入库 --- 查看记录 ---查看详情 -->
		<navBar title="查看详情" goBackUrl="/subpackage-materials/pages/materials/materialsEntry/materialsEntry" @goBack="goBack"></navBar>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="box">
				<view class="content">
					<view class="box2">
						<view class="nav">
							<image class="image" src="/subpackage-equipment/static/materials.png" mode=""></image>
							<text class="text color">{{data.subDeviceTypeName}}</text>
						</view>
			
						<view class="info">
							<view class="info-item">
								<view class="name">入库编号：</view>
								<view class="value">{{data.code}}</view>
							</view>
							<view class="info-item">
								<view class="name">生产日期：</view>
								<view class="value">{{data.productionDatetime}}</view>
							</view>
							<view class="info-item">
								<view class="name">保质期：</view>
								<view class="value">{{data.shelfLife}}个月</view>
							</view>
							<view class="info-item">
								<view class="name">供应商：</view>
								<view class="value">{{data.supplier}}</view>
							</view>
							<view class="info-item">
								<view class="name">单   价：</view>
								<view class="value">{{data.price || ''}}元</view>
							</view>
							<view class="info-item">
								<view class="name">存放基地：</view>
								<view class="value">{{data.stationName}}</view>
							</view>
							<view class="info-item">
								<view class="name">入库数量：</view>
								<view class="value">{{data.num}}{{data.unit}}</view>
							</view>
						</view>
					</view>
					
			
				<!-- 	<view class="table">
						<view class="t-item">
							<text class="f1">存储区域</text>
							<text class="f2">入库数量</text>
						</view>
						<view class="t-item bd" v-for="(item,index) in tableData" :key="index">
							<text class="f1">{{item.storageAreaName}}</text>
							<text class="f2">{{item.inNum}}{{item.unit}}</text>
						</view>
					</view> -->
				</view>
				
				
				<!-- <view class="flow">
					<view class="f-title">流程</view>
					<view class="f-body">
						<u-steps class="step" current="1" dot direction="column" activeColor="#2F80ED" inactiveColor="#2F80ED">
							<u-steps-item title="入库提交" desc="2月15日  18:25"></u-steps-item>
							<u-steps-item title="入库审核" desc="2月15日  18:25"></u-steps-item>
						</u-steps>
						<view class="user">
							<view class="user-item">
								<image class="userImg" src="/static/image/dispatch/user.png" mode=""></image>
								<text class="username">卢灵风</text>
							</view>
							<view class="user-item">
								<image class="userImg" src="/static/image/dispatch/user.png" mode=""></image>
								<text class="username">卢灵风</text>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import { getMaterialCode } from "@/api/materials/materials.js"
	import mixins from "@/utils/mixins.js"
	export default {
		name: "entryInfo",
		mixins: [mixins],
		data() {
			return {
				data:{
					subDeviceTypeName:"",
					code:"",
					time:"",
					shelfLife:"",
					supplier:"",
					price:"",
					stationName:"",
				},
				tableData:[],
			}
		},
		mounted() {
		},
		methods: {
			goBack(url){
				uni.navigateBack({
					url: url
				})
				this.tableData=[]
				this.data={
					subDeviceTypeName:"",
					code:"",
					time:"",
					shelfLife:"",
					supplier:"",
					price:"",
					stationName:"",
				}
				
			},
			onLoad(option){
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.on("setData", (data)=>{
					this.data = data.data
					if(this.data.productionDate){
						this.data.productionDatetime=this.getDate(this.data.productionDate || '')
					}
				})
				// this.data=option
				// console.log(this.data)
				// if(option.productionDate){
				// 	this.data.productionDatetime=this.getDate2(+option.productionDate)
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.entryInfo{
		font-family: PingFang SC-Bold, PingFang SC;
		/* #ifdef MP-WEIXIN */
			padding-top: 180rpx;
		/* #endif */
		.scroll-box{
			height: calc(100vh - 170rpx);
			padding-top: 10rpx;
		}
		.box{
			background-color: #f5f7fa;
			padding-top: 30rpx;
			.content{
				background-color: #FFFFFF;
				padding: 28rpx;
				.box2{
					padding: 0rpx 26rpx;
				}
				.nav{
					line-height: 80rpx;
					height: 80rpx;
					border-bottom: 2rpx dashed #E1E1E1;
					padding-bottom: 10rpx;
					
					.image{
						width: 70rpx;
						height: 70rpx;
						vertical-align: middle;
						margin-right: 30rpx;
					}
					.text{
						font-size: 30rpx;
						
						font-weight: bold;
						color: #F99C34;
					}
					.color{
						color: #5EAAFF;
					}
				}
				.info{
					padding-top: 10rpx;
					padding-bottom: 10rpx;

					.info-item{
						display: flex;
						font-size: 28rpx;
						font-weight: 500;
						color: #445469;
						margin-top: 20rpx;
						.name{
							width: 140rpx;
						}
					}
				}
				
				.table{
					margin-top: 26rpx;
					background: #F8FBFF;
					padding: 0rpx 36rpx;
					.t-item{
						border-bottom: 2rpx dashed #E0E7F6;
						line-height: 84rpx;
						height: 84rpx;
						display: flex;
						font-size: 28rpx;
						font-weight: 500;
						color: #6B7889;
						.f1{
							flex: 1;
						}
						.f2{
							flex: 1;
						}
					}
					.bd{
						color: #22204E;
						font-size: 28rpx;
					}
					
				}
			}
			
			.flow{
				margin-top: 30rpx;
				background-color: #FFFFFF;
				padding-left: 62rpx;
				padding-right: 72rpx;
				padding-top: 36rpx;
				.f-title{
					font-size: 30rpx;
					font-weight: bold;
					color: #22204E;
					margin-bottom: 54rpx;
				}
				.f-body{
					height: 200rpx;
					padding-left: 10rpx;
					display: flex;
					.user{
						flex: 1;
						.user-item{
							text-align: right;
							margin-bottom: 150rpx;
						}
						.userImg{
							width: 50rpx;
							height: 50rpx;
							vertical-align: middle;
							margin-right: 14rpx;
						}
						.username{
							font-size: 22rpx;
							font-weight: 500;
							color: #6A819E;
						}
							
					}
				}
			}
		}
	}
</style>
